<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产监控 - 智能制造分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: { DEFAULT: '#1890ff' },
                        success: { DEFAULT: '#52c41a' },
                        warning: { DEFAULT: '#faad14' },
                        error: { DEFAULT: '#f5222d' }
                    }
                }
            }
        }
    </script>
    <style>
        .ant-layout { min-height: 100vh; }
        .ant-layout-sider { background: #001529; }
        .ant-menu { background: transparent; }
        .ant-menu-item { color: rgba(255,255,255,0.65); }
        .ant-menu-item:hover { color: #fff; }
        .ant-menu-item-selected { color: #fff; background: #1890ff; }
        .ant-card { border-radius: 2px; border: 1px solid #f0f0f0; }
        .ant-card-head { border-bottom: 1px solid #f0f0f0; padding: 16px 24px; }
        .ant-table { border-radius: 2px; }
        .ant-table-thead > tr > th { background: #fafafa; font-weight: 500; }
        .ant-btn { border-radius: 2px; box-shadow: 0 2px 0 rgba(0,0,0,0.015); }
        .ant-alert { border-radius: 2px; }
    </style>
</head>
<body class="bg-[#f0f2f5]">
<div class="ant-layout">
    <!-- 侧边栏 -->
    <aside class="fixed inset-y-0 left-0 w-64 bg-[#001529] text-white">
        <div class="flex flex-col h-full">
            <div class="flex items-center justify-center h-16 border-b border-white/10">
                <i class="fas fa-industry text-primary-400 text-2xl"></i>
                <span class="ml-2 text-xl font-medium">智能制造分析</span>
            </div>
            <nav class="flex-1 px-4 py-4 space-y-1">
                <a href="dashboard.html" class="flex items-center px-4 py-2 text-white bg-primary-500 rounded">
                    <i class="fas fa-chart-line w-5 h-5"></i>
                    <span class="ml-3">生产监控</span>
                </a>
                <a href="yield_analysis.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-chart-pie w-5 h-5"></i>
                    <span class="ml-3">良率分析</span>
                </a>
                <a href="equipment_maintenance.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-tools w-5 h-5"></i>
                    <span class="ml-3">设备维护</span>
                </a>
                <a href="data_source.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-database w-5 h-5"></i>
                    <span class="ml-3">数据源配置</span>
                </a>
                <a href="system_settings.html" class="flex items-center px-4 py-2 text-white/65 hover:text-white hover:bg-white/10 rounded">
                    <i class="fas fa-cog w-5 h-5"></i>
                    <span class="ml-3">系统设置</span>
                </a>
            </nav>
        </div>
    </aside>
    <!-- 主内容区 -->
    <main class="ml-64 p-8">
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-medium text-gray-900">生产监控</h1>
            <div class="flex items-center space-x-4">
                <button class="inline-flex items-center px-4 py-2 border border-transparent rounded shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600">
                    <i class="fas fa-sync-alt mr-2"></i> 刷新数据
                </button>
            </div>
        </div>
        <!-- 数据概览 -->
        <div class="grid grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500">今日产量</p>
                        <p class="text-2xl font-semibold text-gray-900">2,345</p>
                    </div>
                    <div class="p-3 bg-primary-50 rounded-full">
                        <i class="fas fa-box text-primary-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-success-600">
                        <i class="fas fa-arrow-up mr-1"></i> 12.5%
                    </span>
                    <span class="text-sm text-gray-500 ml-2">较昨日</span>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500">良品率</p>
                        <p class="text-2xl font-semibold text-gray-900">98.5%</p>
                    </div>
                    <div class="p-3 bg-success-50 rounded-full">
                        <i class="fas fa-check-circle text-success-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-success-600">
                        <i class="fas fa-arrow-up mr-1"></i> 0.5%
                    </span>
                    <span class="text-sm text-gray-500 ml-2">较昨日</span>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500">设备运行率</p>
                        <p class="text-2xl font-semibold text-gray-900">95.2%</p>
                    </div>
                    <div class="p-3 bg-warning-50 rounded-full">
                        <i class="fas fa-cogs text-warning-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-error-600">
                        <i class="fas fa-arrow-down mr-1"></i> 1.2%
                    </span>
                    <span class="text-sm text-gray-500 ml-2">较昨日</span>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500">异常数</p>
                        <p class="text-2xl font-semibold text-gray-900">3</p>
                    </div>
                    <div class="p-3 bg-error-50 rounded-full">
                        <i class="fas fa-exclamation-triangle text-error-500 text-xl"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-success-600">
                        <i class="fas fa-arrow-down mr-1"></i> 2
                    </span>
                    <span class="text-sm text-gray-500 ml-2">较昨日</span>
                </div>
            </div>
        </div>
        <!-- 生产趋势 -->
        <div class="bg-white rounded-lg shadow-sm mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">生产趋势</h3>
            </div>
            <div class="p-6">
                <div id="productionTrend" style="height: 400px;"></div>
            </div>
        </div>
        <!-- 异常记录 -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">异常记录</h3>
            </div>
            <div class="p-6">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常类型</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20 16:45</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">设备A-001</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">温度过高</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-error-50 text-error-600">未处理</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <button class="text-primary-500 hover:text-primary-600">查看详情</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20 15:30</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">设备B-002</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">压力异常</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-warning-50 text-warning-600">处理中</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <button class="text-primary-500 hover:text-primary-600">查看详情</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20 14:15</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">设备C-003</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">速度异常</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-success-50 text-success-600">已解决</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <button class="text-primary-500 hover:text-primary-600">查看详情</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>
<script>
    // 生产趋势图表
    const productionTrend = echarts.init(document.getElementById('productionTrend'));
    const productionTrendOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['产量', '良品率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00']
        },
        yAxis: [
            {
                type: 'value',
                name: '产量',
                position: 'left'
            },
            {
                type: 'value',
                name: '良品率',
                position: 'right',
                axisLabel: {
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name: '产量',
                type: 'line',
                data: [120, 132, 101, 134, 90, 230, 210, 182, 191],
                smooth: true,
                lineStyle: {
                    width: 3,
                    color: '#1890ff'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(24,144,255,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(24,144,255,0.1)'
                        }]
                    }
                }
            },
            {
                name: '良品率',
                type: 'line',
                yAxisIndex: 1,
                data: [98.5, 98.2, 98.8, 98.5, 98.7, 98.9, 98.6, 98.8, 98.5],
                smooth: true,
                lineStyle: {
                    width: 3,
                    color: '#52c41a'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(82,196,26,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(82,196,26,0.1)'
                        }]
                    }
                }
            }
        ]
    };
    productionTrend.setOption(productionTrendOption);
    window.addEventListener('resize', () => {
        productionTrend.resize();
    });
</script>
</body>
</html> 